<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: packages/geo/src/geo.vue</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: packages/geo/src/geo.vue</h1>

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-10-20 09:51:58
 * @LastEditTime: 2019-10-21 21:58:14
 * @LastEditors: Please set LastEditors
 -->
&lt;template>
  &lt;div v-if="features.length">
    &lt;xdh-map-polygon ref="poly" v-for="(item, index) in features"  :key="`poly_${index}`" :coordinates="item.coordinates[0]"
                fill="rgba(0,0,0,0.5)"
                stroke-color="transparent"
                :stroke-width="1" :text="item.properties.name" color="transparent" 
                @draw="drawHandle(arguments[0], item)" 
                @pointermove="hoverHandle(...arguments, item)"
                v-on="geoListeners(item)"
                
    >&lt;/xdh-map-polygon>
    &lt;!--  -->
  &lt;/div>  
&lt;/template>

&lt;script>
  /**
   * 遮罩蒙层
   * @module xdh-map-mask
   */
  
  import XdhMapPolygon from '../../polygon'
  import {mapReady, getParent} from 'utils/util'
  // import {parse} from 'utils/style'
  import {pointerMove} from 'ol/events/condition.js'
  import Select from 'ol/interaction/Select.js'

// 从Echarts提取的编码解码方法
  const decodePolygon = function (coordinate, encodeOffsets) {
    let result = [];
    let prevX = encodeOffsets[0];
    let prevY = encodeOffsets[1];
    for (let i = 0; i &lt; coordinate.length; i += 2) {
      let x = coordinate.charCodeAt(i) - 64;
      let y = coordinate.charCodeAt(i + 1) - 64;
      // ZigZag decoding
      x = (x >> 1) ^ (-(x &amp; 1));
      y = (y >> 1) ^ (-(y &amp; 1));
      // Delta deocding
      x += prevX;
      y += prevY;
      
      prevX = x;
      prevY = y;
      // Dequantize
      result.push([x / 1024, y / 1024]);
    }
    
    return result;
  }
  export default {
    name: 'XdhMapGeo',
    components: {
      XdhMapPolygon
    },
    /**
     */
    props: {
      state: {
        type: Object,
        required: true
      },
      drawDefine: {
        type: Function
      }
    },
    data() {
      return {
        features: [],
        currentFeature: null,
        currentObj: null,
        featureIndex: this.state.features.length
      }
    },
    computed: {
      decodeGeo() {
        if (!this.state) return null
        const geo = this.state
        const features = geo.features
        features.forEach(feature => {
          let geometry = feature.geometry
          let coordinates = geometry.coordinates
          let encodeOffsets = geometry.encodeOffsets
          if (!encodeOffsets) return geo
          geometry.coordinates = coordinates.map((coordinate, index) => {
            if (Array.isArray(coordinate)) {
              return coordinate.map((coord, j) => {
                return decodePolygon(coord, encodeOffsets[index][j])
              })
            }
            return decodePolygon(coordinate, encodeOffsets[index])
          })
        })
        return geo
      }
    },
    watch: {
      featureIndex: function(val) {
        if (val &lt;= 0) {
          this.$emit('ready', this.features)
        }
      }
    },
    methods: {
      geoListeners(item) {
        let vm = this
        let obj = Object.assign({}, vm.$listeners)
        for (let key in obj) {
          if (key !== 'mouseLeave' || key !== 'mouseEnter' || key !== 'pointermove') {
            obj[key] = obj[key].bind(vm, ...arguments)
          } 
        }
        return obj
      },
      hoverHandle(e, feature, obj) {  
        if (!this.currentFeature) {
          this.currentFeature = feature
          this.currentObj = obj
          this.$emit('mouseEnter', obj, e, feature)
        } else {
          if (this.currentFeature !== feature) {
            this.$emit('mouseLeave', this.currentObj, e, this.currentFeature)
            this.currentFeature = feature
            this.currentObj = obj
            this.$emit('mouseEnter', obj, e, feature)
          }
        }
      },
      drawHandle(feature, obj) {
        this.featureIndex -= 1 // this.featureIndex - 1
        obj.Feature = feature
        // console.log('feaIndex', this.featureIndex)
        if (this.drawDefine) {
          this.drawDefine(feature, obj)
        }
      },
      ready(map) {
        this.map = map
        this.select = new Select({condition: pointerMove})
        
        this.map.addInteraction(this.select)
        this.select.on('select', (e) => {
          if(!e.selected.length &amp;&amp; this.currentFeature) {
            this.$emit('mouseLeave', this.currentObj, e, this.currentFeature)
            this.$nextTick(() => {
              this.currentFeature = null
              this.currentObj = null
            })
          }
        })
         
      },

      formatFeatures() {
        if (!this.decodeGeo) return []
        if (!this.decodeGeo.features || !this.decodeGeo.features.length) return []
        let features = this.decodeGeo.features
        let arr = features.map((item, index) => {
          return {
            // index: index,
            type: item.geometry.type,
            coordinates: item.geometry.coordinates,
            properties: item.properties || {}
          }
        })
        arr = arr.filter((item) => {
          if (item.type === 'Polygon' || item.type === 'MultiPolygon') {
            return item
          }
        })
        
        // let temp = arr.filter((item) => { return item.type !== 'Polygon' })
        let output = []
        arr.forEach((item, index) => {
          if (item.type === 'Polygon') {
            output.push(item)
          } else {
            let inner = item.coordinates.map((a, j) => { 
              return {
                type: item.type,
                coordinates: a,
                properties: item.properties
              } 
            })
            output = output.concat(inner)
          }
        })
        this.features = output
      },
      getFeatures() {
        return this.features
        // console.log(this.coordType)
      }
    },
    created() {
      // console.log(this.coordType)
      this.parent = getParent.call(this)
    },
    mounted() {
      mapReady.call(this, this.ready)
      this.$nextTick(() => {
        this.formatFeatures()
      })
    },
    beforeDestroy() {
      this.map.removeInteraction(this.select)
    }
  }
&lt;/script>
</code></pre>
        </article>
    </section>




</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-xdh-map.html">xdh-map</a></li><li><a href="module-xdh-map-circle.html">xdh-map-circle</a></li><li><a href="module-xdh-map-dialog.html">xdh-map-dialog</a></li><li><a href="module-xdh-map-draw.html">xdh-map-draw</a></li><li><a href="module-xdh-map-draw-arc.html">xdh-map-draw-arc</a></li><li><a href="module-xdh-map-draw-panel.html">xdh-map-draw-panel</a></li><li><a href="module-xdh-map-drawdown.html">xdh-map-drawdown</a></li><li><a href="module-xdh-map-echarts.html">xdh-map-echarts</a></li><li><a href="module-xdh-map-geo-layer.html">xdh-map-geo-layer</a></li><li><a href="module-xdh-map-group.html">xdh-map-group</a></li><li><a href="module-xdh-map-heat.html">xdh-map-heat</a></li><li><a href="module-xdh-map-html.html">xdh-map-html</a></li><li><a href="module-xdh-map-icon.html">xdh-map-icon</a></li><li><a href="module-xdh-map-image.html">xdh-map-image</a></li><li><a href="module-xdh-map-line.html">xdh-map-line</a></li><li><a href="module-xdh-map-mask.html">xdh-map-mask</a></li><li><a href="module-xdh-map-measure.html">xdh-map-measure</a></li><li><a href="module-xdh-map-overview.html">xdh-map-overview</a></li><li><a href="module-xdh-map-panel.html">xdh-map-panel</a></li><li><a href="module-xdh-map-placement.html">xdh-map-placement</a></li><li><a href="module-xdh-map-pointer.html">xdh-map-pointer</a></li><li><a href="module-xdh-map-polygon.html">xdh-map-polygon</a></li><li><a href="module-xdh-map-popup.html">xdh-map-popup</a></li><li><a href="module-xdh-map-rectangle.html">xdh-map-rectangle</a></li><li><a href="module-xdh-map-scatter.html">xdh-map-scatter</a></li><li><a href="module-xdh-map-text.html">xdh-map-text</a></li><li><a href="module-xdh-map-track.html">xdh-map-track</a></li><li><a href="module-xdh-map-type.html">xdh-map-type</a></li><li><a href="module-xdh-map-warp.html">xdh-map-warp</a></li><li><a href="module-xdh-map-zoom.html">xdh-map-zoom</a></li><li><a href="module-xdh-map-zoom-panel.html">xdh-map-zoom-panel</a></li></ul><h3>Classes</h3><ul><li><a href="ol.interaction.areaSelect.html">areaSelect</a></li><li><a href="ol.interaction.drag.html">drag</a></li><li><a href="ol.source.TileSuperMapRest.html">TileSuperMapRest</a></li></ul><h3>Events</h3><ul><li><a href="module-xdh-map-type.html#~event:change">change</a></li><li><a href="module-xdh-map.html#~event:changeType">changeType</a></li><li><a href="module-xdh-map-pointer.html#~event:copy">copy</a></li><li><a href="module-xdh-map-draw.html#~event:drawend">drawend</a></li><li><a href="module-xdh-map-draw.html#~event:drawstart">drawstart</a></li><li><a href="module-xdh-map-draw.html#~event:modifyend">modifyend</a></li><li><a href="module-xdh-map-draw.html#~event:modifystart">modifystart</a></li><li><a href="module-xdh-map-geo-layer.html#~event:mouseEnter">mouseEnter</a></li><li><a href="module-xdh-map-track.html#~event:move">move</a></li><li><a href="global.html#event:on-boxEnd">on-boxEnd</a></li><li><a href="global.html#event:on-boxStart">on-boxStart</a></li><li><a href="global.html#event:on-dragDown">on-dragDown</a></li><li><a href="global.html#event:on-dragMove">on-dragMove</a></li><li><a href="global.html#event:on-dragUp">on-dragUp</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-draw">on-draw</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-draw-end">on-draw-end</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-edit-start">on-edit-start</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-finish-draw">on-finish-draw</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-finish-edit">on-finish-edit</a></li><li><a href="module-xdh-map-draw-panel.html#~event:on-inited">on-inited</a></li><li><a href="module-xdh-map-measure.html#~event:on-measureEnd">on-measureEnd</a></li><li><a href="module-xdh-map-drawdown.html#~event:on-toggle">on-toggle</a></li><li><a href="module-xdh-map.html#~event:ready">ready</a></li><li><a href="module-xdh-map-track.html#~event:start">start</a></li><li><a href="module-xdh-map-track.html#~event:stop">stop</a></li></ul><h3>Global</h3><ul><li><a href="global.html#bd09ToGcj02">bd09ToGcj02</a></li><li><a href="global.html#bd09ToGps84">bd09ToGps84</a></li><li><a href="global.html#bd09ToWgs84">bd09ToWgs84</a></li><li><a href="global.html#capitalize">capitalize</a></li><li><a href="global.html#convertToWgs84">convertToWgs84</a></li><li><a href="global.html#createLayer">createLayer</a></li><li><a href="global.html#createTdtLayer">createTdtLayer</a></li><li><a href="global.html#D2R">D2R</a></li><li><a href="global.html#featureStyleRender">featureStyleRender</a></li><li><a href="global.html#gcj02ToBd09">gcj02ToBd09</a></li><li><a href="global.html#gcj02ToWgs84">gcj02ToWgs84</a></li><li><a href="global.html#gcjToGps84">gcjToGps84</a></li><li><a href="global.html#get">get</a></li><li><a href="global.html#getDistance">getDistance</a></li><li><a href="global.html#getParent">getParent</a></li><li><a href="global.html#gps84ToGcj02">gps84ToGcj02</a></li><li><a href="global.html#keyMap">keyMap</a></li><li><a href="global.html#LAYERS">LAYERS</a></li><li><a href="global.html#mapReady">mapReady</a></li><li><a href="global.html#mix">mix</a></li><li><a href="global.html#mixProps">mixProps</a></li><li><a href="global.html#options">options</a></li><li><a href="global.html#outOfChina">outOfChina</a></li><li><a href="global.html#pi">pi</a></li><li><a href="global.html#prefix">prefix</a></li><li><a href="global.html#props">props</a></li><li><a href="global.html#set">set</a></li><li><a href="global.html#StyleMap">StyleMap</a></li><li><a href="global.html#wgs84ToBd09">wgs84ToBd09</a></li><li><a href="global.html#wgs84ToGcj02">wgs84ToGcj02</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.2</a> on Sat Mar 21 2020 16:40:44 GMT+0800 (GMT+08:00)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
